<template>
	<view class="request-loading-view" v-show="loadingShow">
		<view class="contont">
			<view class="icon">
			</view>
		</view>

		<text class="text">加载中<text class="loading"></text></text>

		<view class="footer">
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {};
		},
		computed: {
			//计算属性判断vuex中的显示状态
			loadingShow() {
				return this.$store.state.requestLoading;
			}
		},
	};
</script>

<style scoped lang="scss">
	.request-loading-view {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 198903060;
		background-color: #FFFFFF;
		text-align: center;
	}

	.contont {
		position: relative;
		width: 405rpx;
		height: 436rpx;
		margin-top: 116rpx;
		margin-left: 154rpx;
		background-image: url("");
	}

	.icon {
		position: absolute;
		top: 123rpx;
		left: 138rpx;
		width: 280rpx;
		height: 280rpx;
		animation: spin 3s infinite linear;
	}

	.icon::before {
		animation: inherit;
		animation-direction: reverse;
		content: '';
		display: inline-block;
		width: 206rpx;
		height: 207rpx;
		background-size: 100%;
		background-image: url('');
	}

	@keyframes spin {
		to {
			transform: rotate(1turn);
		}
	}

	.text {
		font-size: 42rpx;
		font-weight: 500;
		color: #F58554;
		line-height: 36rpx;
	}

	.loading:after {
		overflow: hidden;
		display: inline-block;
		vertical-align: bottom;
		animation: ellipsis 1s infinite;
		content: "···";
	}

	@keyframes ellipsis {
		from {
			width: 2rpx;
		}

		to {
			width: 30rpx;
		}
	}

	.footer {
		position: absolute;
		bottom: 0;
		height: 294rpx;
		width: 100%;
		background-image: url("");
		background-size: 100%;
	}
</style>
